<template>
  <div class="main w-full main_box">
    <!-- <my-header
      class="header-white"
      :show-head-top='true'
      :headLogo='logo'
    >
      <div
        slot='top-slot'
        class="mr-25"
      >
        <span class="fl">[公告]</span>
        <ul class="swip">
          <transition-group name="el-fade-in">
            <li
              v-show="newIndex==index"
              v-for="(item,index) in newsList"
              :key='index'
            >
              <router-link
                :to='"/notice/detail/"+item.id'
                v-text="item.title"
              ></router-link>
            </li>
          </transition-group>
        </ul>
      </div>
    </my-header> -->
    <div class="home_head">
      <my-header class="header-main">
        <login-bar></login-bar>
      </my-header>
    </div>
    <index-banner></index-banner>
    <!-- 行情横排 -->
    <div class="home_mark">
      <market-data></market-data>
    </div>
    <!-- app下载 -->
    <div class="appdown">
      <app-Down></app-Down>
    </div>
    <div class="clinch">
      <To-register></To-register>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
import indexBanner from "@/components/home/IndexBanner.vue";
import noticeBar from "@/components/home/NoticeBar.vue";
import marketData from "@/components/home/marketData.vue";
import appDown from "@/components/home/appDown.vue";
import mainCoinModel from "@/model/allCoinModel.js";
import ToRegister from "@/components/home/toregister.vue";
import AdVantageIntro from "@/components/home/AdvantageIntro.vue";
import {
  addCustomList,
  removeCustomList,
  matchCustomList
} from "@/assets/js/common.js";
export default {
  components: {
    indexBanner,
    noticeBar,
    marketData,
    appDown,
    ToRegister,
    AdVantageIntro
  },
  data() {
    return {
      logo: require("@/assets/images/logoimg/logo01.png"),
      currentCoinId: "涨幅榜",
      loading: true,
      mainCoinModel: mainCoinModel,
      menutype:[
        {type:'rise',maincoin:'涨幅榜'},{type:"fall",maincoin:'跌幅榜'},{type:'amount',maincoin:'成交榜'},
      ],
      statusMap: {
        s_0: "inavilable",
        s_1: "avilable"
      },
      currentMainCoin: "",
      searchVal: "",
      tableData: [],
      rawData: [],
      newsList: [],
      newIndex: 0,
      timer: null,
      area:'1',
      
    };
  },
  computed: {
    searchLabel() {
      return `${this.$t("currencySearch")}(${this.currentCoinId})`;
    }
  },
  mounted() {
    return
    this.gettradinghome(this.menutype[0].type,1);
    // return
    this.getarea();
    console.log(mainCoinModel.coinid);
    if (mainCoinModel.coinid) {
      // this.getTradCoin(mainCoinModel.coinid,this.area);
      this.getmaincoin(this.area);
      this.currentCoinId = mainCoinModel.coinid;
      this.currentMainCoin = mainCoinModel.maincoin;
      console.log(mainCoinModel);
      return;
    }
    this.getmaincoin(this.area);
    this.$bus.on("mainCoinLoad", coin => {
      this.currentCoinId = coin;
      console.log(this.currentCoinId);
      this.getTradCoin(coin,this.area);
      this.currentMainCoin = mainCoinModel.maincoin;
    });
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
  },
  methods: {
    onNewsLoad(data) {
      this.newsList = data;
      this.newsSwip();
    },
    newsSwip() {
      let i = 0;
      this.timer = setInterval(() => {
        let len = this.newsList.length;
        if (i > len - 1) {
          i = 0;
        }
        this.newIndex = i;
        i++;
      }, 3000);
    },     
    // 添加自选
    addMylist(rowData, index) {
      let data = rowData;
      this.$set(this.tableData, index, data);
      data.isMyLike = !data.isMyLike;
      if (data.isMyLike) {
        addCustomList(data);
      } else {
        if (this.currentCoinId == "opt") {
          this.tableData = removeCustomList(data);
        } else {
          removeCustomList(data);
        }
      }
    },
    onTabChange(e, index, item) {
      console.log(item);
      if (item.maincoin == this.currentCoinId) return;
      this.currentCoinId = item.maincoin;
      this.currentMainCoin = item;
      this.gettradinghome(item.type);
    },
    getmaincoin(){
      this.request(this.api.getmaincoin,{area:this.area}).then(res => {
        console.log(`交易对:${JSON.stringify(res)}`);
        this.coinid=res.data[0].maincoin;
        this.mainCoinModel.maincoin=res.data;
        this.getTradCoin(this.coinid,1)
      });
    },
    // 查看交易板块
    getarea(){
      this.request(this.api.getarea).then(res => {
        console.log(`交易板块:${JSON.stringify(res)}`);
        this.area=res.data[0].areaid;
        return this.area
      });
    },
    // 获取所有币种列表
    getAllCoin() {
      this.request(this.api.allcoin).then(res => {
        console.log(`币种列表:${JSON.stringify(res)}`);
        if (res && res.code != "0") return this.getDataFaild(res.msg);
        res.data && res.data.list && (this.tableData = res.data.list);
      });
    },
    // 获取我的自选
    getCustomList() {
      let customList = this.storage.get("customList");
      this.currentCoinId = "opt";
      if (customList) {
        this.tableData = customList;
      } else {
        this.tableData = [];
      }
    },
    // 获取币种交易行情
    getTradCoin(coinid,area) {
      this.loading = true;
      this.request(this.api.gettradcoin, {
        maincoin: coinid,
        area:this.area,
      }).then(res => {
        console.log(`交易币种:${JSON.stringify(res)}`);
        this.loading = false;
        if (res.code=='0') {
          this.tableData=res.data;
        }
        if (res && res.code != "0") return this.getDataFaild(res.msg);
        if (res.data && res.data) {
          // this.tableData = matchCustomList(res.data);
          // this.tableData.map(item => {
          //   if (item.prise && this.currentMainCoin.cny) {
          //     item.cny = (item.prise * this.currentMainCoin.cny).toFixed(6);
          //   }
          // });
          this.rawData = res.data.slice(0);
        }
      });
    },
    //搜索币种
    searchCoin() {
      if (this.searchVal == "") {
        this.tableData = this.rawData;
        console.log(this.rawData);
        
        return false;
      }
      let result = [];
      this.rawData.map(item => {
        if (
          item.tradcoin &&
          item.tradcoin.toLowerCase().indexOf(this.searchVal.toLowerCase()) != -1
        ) {
          result.push(item);
        }
      });
      this.tableData = result;
    },
    //跳转
    goTrade(api, data) {
      const maincoinid= data.maincoin;
      const coinid = data.tradcoin;
      const link ='currency_trade?maincoinid='+maincoinid+'&coinid='+coinid+'&areaid='+this.area;
      this.navigateTo(link);
      // this.navigateTo(api, {
      //   maincoinid: data.maincoinid,
      //   coinid: data.coinid
      // });
    },
    // 涨幅榜
    gettradinghome(coinid,area){
      this.loading = true;
      this.request(this.api.gettradinghome,{type:coinid,area:'1'}).then(res => {
        this.loading = false;
        if (res.code=='0') {
          this.tableData=res.data;
        }
        if (res && res.code != "0") return this.getDataFaild(res.msg);
      });
    }
  }
};
</script>
<style>
.el-tab-col-1 .cell {
  padding: 0;
}
</style>

<style lang="scss" scoped>
.main_box{
  .home_mark{margin-top: -48px;}
    
}
.dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background: #666;
  right: -40px;
}
.swip {
  display: inline-block;
  margin-left: 15px;
  color: #fff;
  overflow: hidden;
}
.trade-btn {
  margin-left: 6px;
  color:$txt-bluea;
  border:1px solid $txt-bluea;
  &:first-child {
    margin-left: 0;
  }
}
.btn-container {
  margin: 0 -10px;
  @media screen and (max-width: 1280px) {
    flex-direction: column;
    .trade-btn {
      margin-left: 0;
      margin-top: 6px;
      &:first-child {
        margin-top: 0;
      }
    }
  }
}
span.status_1 {
  color: $color-success;
}
span.status_0 {
  color: #999;
}
.content {
  width: 70%;
  min-width: 1200px;
  @include hCenter;
  .option {
    text-align: center;
    cursor: pointer;
  }
  .list-table {
    margin: 40px 0;
    .status {
      color: red !important;
    }
    .operate {
      display: flex;
      justify-content: space-between;
      align-items: center;
      i {
        cursor: pointer;
      }
    }
  }
  .tab-card {
    overflow: hidden;
    margin-right: 200px;
    li {
      @include textVcenter(40px);
      margin: 0 44px;
      padding: 0 10px;
      display: inline-block;
      color: #dddddd;
      font-size: $font-large;
      cursor: pointer;
      &.active {
        color: #d9b97e;
        border-bottom: 1px solid #d9b97e;
      }
      &:first-child {
        margin-left: 0;
      }
    }
  }
  .el-input {
    width: 200px;
    float: right;
  }
}
.currency-pair {
  cursor: pointer;
  em:hover {
    color: $color-danger;
  }
}
.marauto{margin: 0 auto!important}

.appdown{background:url('~@/assets/images/images/images/bg2.png');padding: 30px 0;}
.clinch{padding: 50px 0 50px 0;}
.padd5{padding: 0 5px;}
.sys_info{margin-bottom: 90px;margin-top: 68px;}

</style>

